<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未来之窗昭和仙君cyberwin_fairyalliance_webquery - 数据渲染功能</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #165DFF;
            border-bottom: 2px solid #165DFF;
            padding-bottom: 10px;
            margin-bottom: 30px;
        }
        h2 {
            color: #333;
            margin: 25px 0 15px;
            padding-left: 10px;
            border-left: 4px solid #165DFF;
        }
        h3 {
            color: #444;
            margin: 20px 0 10px;
        }
        p {
            margin-bottom: 15px;
            line-height: 1.8;
        }
        .function-info {
            background-color: #f0f7ff;
            border-radius: 6px;
            padding: 20px;
            margin: 20px 0;
        }
        .param-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0 25px;
        }
        .param-table th, .param-table td {
            border: 1px solid #ddd;
            padding: 12px 15px;
            text-align: left;
        }
        .param-table th {
            background-color: #f5f7fa;
            font-weight: bold;
            width: 20%;
        }
        pre {
            background-color: #f8f8f8;
            border-radius: 6px;
            padding: 15px;
            overflow-x: auto;
            border: 1px solid #eee;
            margin: 15px 0;
        }
        code {
            font-family: "Consolas", monospace;
            color: #d32f2f;
        }
        .example-box {
            border: 1px dashed #165DFF;
            border-radius: 6px;
            padding: 15px;
            margin: 15px 0;
        }
        .highlight {
            color: #165DFF;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>未来之窗昭和仙君cyberwin_fairyalliance_webquery</h1>
        
        <h2>通用数据渲染功能</h2>
        <p>本文档介绍$cq库中用于数据渲染到界面的功能，包括核心函数和扩展的标签名属性。</p>
        
        <section>
            <h3>1. 核心渲染函数</h3>
            <div class="function-info">
                <p><strong>函数名：</strong> $cq.未来之窗_人工智能_前端口_数据渲染到界面</p>
                <p><strong>作用：</strong> 将数据对象中的键值对批量渲染到页面元素中，根据元素类型自动选择合适的赋值方式</p>
                <p><strong>版本：</strong> 2022-8-29</p>
                <p><strong>定义文件：</strong> fn_cyberwin_common_data_rendering.js</p>
                
                <h4>函数语法</h4>
                <pre><code>$cq.未来之窗_人工智能_前端口_数据渲染到界面(obj, 前置参数)</code></pre>
                
                <h4>参数说明</h4>
                <table class="param-table">
                    <tr>
                        <th>参数名</th>
                        <th>类型</th>
                        <th>是否必需</th>
                        <th>说明</th>
                    </tr>
                    <tr>
                        <td>obj</td>
                        <td>Object</td>
                        <td>是</td>
                        <td>需要渲染到界面的数据对象，键值对形式</td>
                    </tr>
                    <tr>
                        <td>前置参数</td>
                        <td>String</td>
                        <td>否</td>
                        <td>元素类名的前缀，默认为"cl_handle_data_"，用于匹配页面元素的class属性</td>
                    </tr>
                </table>
                
                <h4>功能说明</h4>
                <ul>
                    <li>函数会遍历数据对象obj的所有属性</li>
                    <li>每个属性会与前置参数组合形成元素的class选择器（格式：前置参数+属性名）</li>
                    <li>根据匹配到的元素标签类型，使用不同的方式赋值：
                        <ul>
                            <li>input和select元素：使用val()方法设置值</li>
                            <li>td和cyberdiv元素：使用text()方法设置文本内容</li>
                            <li>其他元素：默认使用text()方法设置文本内容</li>
                        </ul>
                    </li>
                </ul>
            </div>
            
            <h3>2. 使用示例</h3>
            <div class="example-box">
                <h4>HTML结构</h4>
                <pre><code>&lt;!-- 页面元素 --&gt;
&lt;input type="text" class="cl_handle_data_username" /&gt;
&lt;select class="cl_handle_data_gender"&gt;
    &lt;option value="male"&gt;男&lt;/option&gt;
    &lt;option value="female"&gt;女&lt;/option&gt;
&lt;/select&gt;
&lt;td class="cl_handle_data_age"&gt;&lt;/td&gt;
&lt;div class="cl_handle_data_address"&gt;&lt;/div&gt;
&lt;cyberdiv class="cl_handle_data_status"&gt;&lt;/cyberdiv&gt;</code></pre>
                
                <h4>JavaScript代码</h4>
                <pre><code>// 准备数据对象
var userData = {
    username: "张三",
    gender: "male",
    age: 30,
    address: "北京市朝阳区",
    status: "正常"
};

// 调用数据渲染函数
$cq.未来之窗_人工智能_前端口_数据渲染到界面(userData);

// 使用自定义前置参数的示例
// HTML元素class应为"user_info_username"等
// $cq.未来之窗_人工智能_前端口_数据渲染到界面(userData, "user_info_");</code></pre>
                
                <h4>执行结果</h4>
                <ul>
                    <li>class为"cl_handle_data_username"的input元素值将被设置为"张三"</li>
                    <li>class为"cl_handle_data_gender"的select元素将选中value为"male"的选项</li>
                    <li>class为"cl_handle_data_age"的td元素文本将被设置为"30"</li>
                    <li>class为"cl_handle_data_address"的div元素文本将被设置为"北京市朝阳区"</li>
                    <li>class为"cl_handle_data_status"的cyberdiv元素文本将被设置为"正常"</li>
                </ul>
            </div>
        </section>
        
        <section>
            <h3>3. 扩展的标签名属性</h3>
            <p>为$cq库扩展了获取元素标签名的属性，用于在数据渲染等场景中判断元素类型。</p>
            <p><strong>版本：</strong> 2025-08-30</p>
            
            <h4>3.1 tagName属性</h4>
            <div class="function-info">
                <p><strong>作用：</strong> 获取匹配元素集合中第一个元素的标签名</p>
                <p><strong>语法：</strong> $cq(selector).tagName</p>
                
                <h4>返回值</h4>
                <p>字符串，返回第一个匹配元素的标签名（大写形式，与原生DOM保持一致），若没有匹配元素则返回空字符串。</p>
                
                <h4>示例</h4>
                <pre><code>// HTML: &lt;input type="text" id="username" /&gt;
var tag = $cq("#username").tagName;
console.log(tag); // 输出: "INPUT"</code></pre>
            </div>
            
            <h4>3.2 tagNames属性</h4>
            <div class="function-info">
                <p><strong>作用：</strong> 获取所有匹配元素的标签名列表</p>
                <p><strong>语法：</strong> $cq(selector).tagNames</p>
                
                <h4>返回值</h4>
                <p>数组，包含所有匹配元素的标签名（大写形式），每个元素对应一个匹配元素的标签名。</p>
                
                <h4>示例</h4>
                <pre><code>// HTML:
// &lt;input type="text" class="form-control" /&gt;
// &lt;select class="form-control"&gt;&lt;/select&gt;
// &lt;div class="form-control"&gt;&lt;/div&gt;

var tags = $cq(".form-control").tagNames;
console.log(tags); // 输出: ["INPUT", "SELECT", "DIV"]</code></pre>
            </div>
            
            <h4>实现原理</h4>
            <p>通过Object.defineProperty为cyberwin_query原型添加属性，使用getter方法实现：</p>
            <pre><code>// 为$cq原型添加tagName属性
Object.defineProperty(cyberwin_query.prototype, 'tagName', {
    get: function() {
        if (this.elements.length === 0) {
            return '';
        }
        return this.elements[0].tagName || '';
    }
});

// 实现tagNames属性
Object.defineProperty(cyberwin_query.prototype, 'tagNames', {
    get: function() {
        return this.elements.map(el => el.tagName || '');
    }
});</code></pre>
        </section>
        
        <section>
            <h3>4. 实际应用场景</h3>
            <p>数据渲染函数通常用于从后端获取数据后，快速将数据填充到页面表单或展示区域，例如：</p>
            <pre><code>// 从服务器获取用户信息后渲染到页面
$cq.get("/api/user/123", function(data) {
    if (data.success) {
        // 调用数据渲染函数将用户信息填充到页面
        $cq.未来之窗_人工智能_前端口_数据渲染到界面(data.userInfo);
    }
});</code></pre>
            <p>配合tagName属性，还可以自定义更复杂的渲染逻辑：</p>
            <pre><code>// 自定义渲染逻辑示例
$cq.未来之窗_人工智能_前端口_数据渲染到界面 = function(obj) {
    for (var key in obj) {
        var elements = $cq(".data-" + key);
        elements.each(function() {
            var elem = $cq(this);
            var value = obj[key];
            
            // 使用tagName属性判断元素类型
            if (elem.tagName === "INPUT" && elem.attr("type") === "checkbox") {
                // 对复选框进行特殊处理
                elem.prop("checked", value === "1");
            } else if (elem.tagName === "IMG") {
                // 图片元素设置src属性
                elem.attr("src", value);
            } else {
                // 默认处理
                elem.val ? elem.val(value) : elem.text(value);
            }
        });
    }
};</code></pre>
        </section>
    </div>
</body>
</html>
